<template>
  <div class="course-wrapper">
    <ToolRow :type="type"></ToolRow>
    <div 
      class="course-block primary" 
      v-if="type === '' || type === 'primary'">
      <div class="course-block-header">
        <span class="course-block-header-title">小学</span>
        <i class="course-block-header-toggle" :class="primaryBlock ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" @click="toggleBlock('primary')"></i>
      </div>
      <el-collapse-transition>
        <div class="course-block-body" v-show="primaryBlock">
          <ul class="course-list">
            <li class="course yuwen">
              <div class="course-img">
                <div class="course-img-icon flex align-items-center justify-content-center">
                  <i class="iconfont icon-yuwen"></i>
                </div>
              </div>
              <p class="course-title">小学语文</p>
              <p class="course-teacher">主讲: <span>小明</span></p>
              <p class="course-time">16课时</p>
            </li>
            <li class="course shuxue">
              <div class="course-img">
                <div class="course-img-icon flex align-items-center justify-content-center">
                  <i class="iconfont icon-shuxue"></i>
                </div>
              </div>
              <p class="course-title">小学数学</p>
              <p class="course-teacher">主讲: <span>小明</span></p>
              <p class="course-time">12课时</p>
            </li>
            <li class="course yingyu">
              <div class="course-img">
                <div class="course-img-icon flex align-items-center justify-content-center">
                  <i class="iconfont icon-yingyu"></i>
                </div>
              </div>
              <p class="course-title">小学英语</p>
              <p class="course-teacher">主讲: <span>小明</span></p>
              <p class="course-time">16课时</p>
            </li>
          </ul>
        </div>
      </el-collapse-transition>
    </div>
    <div 
      class="course-block middle" 
      v-if="type === '' || type === 'middle'">
      <div class="course-block-header">
        <span class="course-block-header-title">初中</span>
        <i class="course-block-header-toggle" :class="middleBlock ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" @click="toggleBlock('middle')"></i>
      </div>
      <el-collapse-transition>
        <div class="course-block-body" v-show="middleBlock">
          <ul class="course-list">
            <li class="course yuwen">
              <div class="course-img">
                <div class="course-img-icon flex align-items-center justify-content-center">
                  <i class="iconfont icon-yuwen"></i>
                </div>
              </div>
              <p class="course-title">小学语文</p>
              <p class="course-teacher">主讲: <span>小明</span></p>
              <p class="course-time">16课时</p>
              <p class="course-time">报名人数: <span>16</span></p>
            </li>
            <li class="course shuxue">
              <div class="course-img">
                <div class="course-img-icon flex align-items-center justify-content-center">
                  <i class="iconfont icon-shuxue"></i>
                </div>
              </div>
              <p class="course-title">小学数学</p>
              <p class="course-teacher">主讲: <span>小明</span></p>
              <p class="course-time">12课时</p>
            </li>
          </ul>
        </div>
      </el-collapse-transition>
    </div>
    <div 
      class="course-block high" 
      v-if="type === '' || type === 'high'">
      <div class="course-block-header">
        <span class="course-block-header-title">高中</span>
        <i class="course-block-header-toggle" :class="highBlock ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" @click="toggleBlock('high')"></i>
      </div>
      <el-collapse-transition>
        <div class="course-block-body" v-show="highBlock">
          <ul class="course-list">
            <li class="course yuwen">
              <div class="course-img">
                <div class="course-img-icon flex align-items-center justify-content-center">
                  <i class="iconfont icon-yuwen"></i>
                </div>
              </div>
              <p class="course-title">小学语文</p>
              <p class="course-teacher">主讲: <span>小明</span></p>
              <p class="course-time">16课时</p>
            </li>
            <li class="course shuxue">
              <div class="course-img">
                <div class="course-img-icon flex align-items-center justify-content-center">
                  <i class="iconfont icon-shuxue"></i>
                </div>
              </div>
              <p class="course-title">小学数学</p>
              <p class="course-teacher">主讲: <span>小明</span></p>
              <p class="course-time">12课时</p>
            </li>
          </ul>
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>

<script>
import ToolRow from './ToolRow'

export default {
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      primaryBlock: true,
      middleBlock: true,
      highBlock: true
    }
  },
  methods: {
    toggleBlock (type) {
      this[`${type}Block`] = !this[`${type}Block`]
    },
    showBlock (type) {
      this[`${type}Block`] = true
    },
    hideBlock (type) {
      this[`${type}Block`] = false
    }
  },
  components: {
    ToolRow
  }
}
</script>
<style lang="scss" scoped>
  @import "../../assets/scss/var.scss";
  .course-wrapper {
    padding-top: 60px;
  }
  .course-block {
    margin-bottom: 20px;
    box-sizing: border-box;
    &-header {
      font-size: 16px;
      $height: 40px;
      height: 40px;
      background-color: $blue;
      color: $white;
      box-sizing: border-box;
      padding-left: 10px;
      padding-right: 10px;
      &-title {
        line-height: $height;
      }
      &-toggle {
        padding-top: 10px;
        float: right;
        font-size: 16px;
        cursor: pointer;
      }
    }
    $cur: &;
    &.primary {
      #{$cur}-header {
        background-image: linear-gradient(to right, darken($blue, 10) 0%, $blue 100%);
      }
    }
    &.middle {
      #{$cur}-header {
        background-image: linear-gradient(to right, darken($green, 10) 0%, $green 100%);
      }
    }
    &.high {
      #{$cur}-header {
        background-image: linear-gradient(to right, darken($yellow, 10) 0%, $yellow 100%);
      }
    }
  }
  .course {
    background-color: $white;
    box-sizing: border-box;
    min-height: 180px;
    padding: 20px 20px 20px 250px;
    position: relative;
    border-bottom: 1px solid $border;
    &:last-child {
      border-bottom: none;
    }
    .course-img {
      width: 210px;
      height: 140px;
      background-color: $blue;
      position: absolute;
      top: 20px;
      left: 20px;
      .course-img-icon {
        height: 100%;
      }
      .iconfont {
        color: $white;
        font-size: 80px;
      }
    }
    .course-title {
      font-size: 20px;
      line-height: 30px;
      color: $text-primary;
      margin-bottom: 10px;
    }
    .course-teacher {
      font-size: 16px;
      margin-top: 20px;
      margin-bottom: 20px;
      color: $text-regular;
    }
    .course-time {
      font-size: 12px;
      color: $text-secondary;
      margin-bottom: 10px;
    }
    .course-count {
      font-size: 12px;
      color: $text-secondary;
      margin-bottom: 10px;
    }
    &.yuwen {
      .course-img {
        background-color: $blue;
      }
    }
    &.shuxue {
      .course-img {
        background-color: $green;
      }
    }
    &.yingyu {
      .course-img {
        background-color: $yellow;
      }
    }
  }
</style>
